<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>jQuery抛物线动画加入购物车特效代码</title>
    <link rel="stylesheet prefetch" href="resource/bootstrap.css" />
    <style>
      html,
      body {
        cursor: pointer;
      }

      .m-top {
        padding: 15px;

        margin: 20px 0;

        border: 1px solid #eee;

        border-left-width: 5px;

        border-radius: 3px;

        border-left-color: #f0ad4e;
      }

      .m-tip {
        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

        border: 4px solid #ccc;

        color: #999;

        opacity: 0.8;

        margin: 260px auto 0px;

        border-radius: 4px;

        width: 50%;

        padding: 40px 0;

        text-align: center;

        font-size: 16px;
      }

      .m-sidebar {
        position: fixed;

        top: 0;

        right: 0;

        background: #000;

        z-index: 2000;

        width: 35px;

        height: 100%;

        font-size: 12px;

        color: #fff;
      }

      .m-sidebar .cart {
        color: #fff;

        text-align: center;

        line-height: 20px;

        padding: 200px 0 0 0px;

        top: 100px;
      }

      .m-sidebar .cart span {
        display: block;

        width: 20px;

        margin: 0 auto;
      }

      .m-sidebar .cart i {
        width: 35px;

        height: 35px;

        display: block;

        background-image: url();
      }

      .u-flyer {
        display: block;

        width: 50px;

        height: 50px;

        border-radius: 50px;

        position: fixed;

        z-index: 9999;
      }
    </style>
  </head>

  <body>
  
    <div class="container">
      <div class="row">
        <section class="m-tip">
          click at the blank! click here<br />
          在空白处点击鼠标实现放入购物车效果
        </section>
      </div>
    </div>

    <div class="m-sidebar">
      <div class="cart"><i id="end"></i> <span>购物车</span></div>
    </div>

    <script src="resource/jquery.js"></script>
    <script src="resource/fly.min.js"></script>
    <script>
      $("html,body").on("click", function (event) {
        var offset = $("#end").offset(),
        flyer = $('<img class="u-flyer" src="./resource/commodity.png"/>');
        flyer.fly({
          start: {
            left: event.pageX, //开始位置（必填）

            top: event.pageY, //开始位置（必填）
          },
          end: {
            left: offset.left, //结束位置（必填）
            top: offset.top, //结束位置（必填）
            width: 20, //结束时高度
            height: 20, //结束时高度
          },
          autoPlay: true, //是否直接运动,默认true
          speed: 1.0, //越大越快，默认1.2
          onEnd: function () {
            flyer.remove(); //移除dom
          },
        });
      });
    </script>

    <!--效果html结束-->
  </body>
</html>
